<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>UC浏览器</title>
		<style>
			 *{
				padding: 0;
				margin: 0;
			}
			img{
				vertical-align: bottom;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.bd{
				border: 1px solid red;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			.fl{
				float:left
			}
			.fr{
				float: right;
			}
		  .clearfix::before,.clearfix::after{
		   	content: "";
		   	display: table;
		   }
		   .clearfix::after{
		   	clear: both;
		   }
		   header{
			  position: fixed;
			  background-color: white;
			  width: 100%;
			  z-index: 100;
			  top: 0;
		   }
		   .logo{
			   padding-top: 15px;
			   padding-bottom: 12px;
		   }
		   .navigation{
			   padding-right: 20px;
			   padding-top: 5px;
		   }
		   .navigation>li{
			   margin-left: 32px;
			   padding: 0 10px;
			   position: relative;
		   }
		   .current{
			   border-bottom: 3px solid #ff6400;
		   }
		   .navigation a{
			   display: block;
			   font-size: 20px;
			   line-height: 62px; 
		   }
		   .navigation>li:hover{
			   border-bottom: 3px solid green;
		   }
		   .subnav{
			   display:none;
			   position: absolute;
			   /* top: 0;
			   left:0; */
		   }
		   .navigation>li:hover .subnav{
			   display: block;
		   }
		   .subnav li:hover{
		   		background-color: yellow;
		   }
		   .subnav a{
			   display: block;
			   font-size: 16px;
			   line-height: 20px; 
		   }
		   .main{
			   margin-top: 70px;
		   }
		  .banner{
			  height: 400px;
			  background:#1f1f1f url(images/banner.jpg) no-repeat center 0;
			  
		  }
		  .icons{
			  border-bottom: 1px solid #efefef;
			  height: 145px;
		  }
		  .icon{
			  padding-top: 58px;
			  width: 138px;
			  background: url(images/icon.png)no-repeat 49px 21px;
		  }
		  .icon:hover{
		   		  background-position: 49px  -99px;
		   }
		 .icon:nth-child(2){
			  background-position: -90px 21px;
		  }
		 .icon:nth-child(2):hover{
		  	  background-position: -90px -99px ;
		  }
		  .icon:nth-child(3){
			  background-position: -225px 21px;
			  position: relative;
		  }
		  .icon:nth-child(3):hover{
		   	  background-position: -225px -99px ;
				 
		   }
		    .icon:nth-child(3)::before{
				content:"";
				width: 23px;
				height: 11px;
				background: url(images/icon.png) -140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
			}
		  .icon:nth-child(4){
			  background-position: -364px 21px;
			  position: relative;
		  }
		  .icon:nth-child(4)::before{
		  	content:"";
		  	width: 23px;
		  	height: 11px;
		  	background: url(images/icon.png) -140px -280px;
		  	position: absolute;
		  	top: 15px;
		  	left: 82px;
		  }
		  .icon:nth-child(4):hover{
		   	 background-position: -364px -99px ;
		   }
		  .icon:nth-child(5){
		  	background-position: -506px 21px;
		  }
		  
		  .icon:nth-child(5):hover{
		   	 background-position: -506px -99px ;
		   }
		  .icon:nth-child(6){
		     background-position: -643px 21px;
		  }
		.icon:nth-child(6):hover{
			 background-position: -643px -99px ;
		}
		  .icon a{
			  display:block;
			  font-size: 11px;
			  line-height:81px;
			  text-align: center;
			  color: #1F1F1F;
		  }
		  .icons .w{
			  position: relative;
		  }
		  .twocode{
			  float: left;
			  width: 128px;
			  background: url(images/twocode.png)no-repeat ;
			  font-size: 11px;
			  line-height: 71px;
			  padding-top: 106px;
			  text-align: center;
			  position: absolute;
			  top: -32px;
			  right: -4px;
		  }
		  .news{
			  padding-bottom: 36px;
		  }
		  .new{
			  width: 290px;
			  
		  }
		  .new:nth-child(2){
		  	padding-left:58px;
		  	padding-right: 58px;
		  }
		  .title{
			  padding-top: 20px;
		  }
		  .title h4{
			  
			  font-size: 18px;
			  line-height: 61px;
		  }
		  .title a{
			  /* position: relative; */
			  font-size: 12px;
			  line-height: 58px;
			  margin-right: 10px;
		  }
		  .title a::after{
			  content: "";
			  width: 4px;
			  height: 4px;
			  border: 2px solid #dedede;
			  border-left-color: transparent;
			  border-bottom-color: transparent;
			  transform:rotate(45deg);
			  position: absolute;
			  top: 25px;
			  left: 24px;
			  
		  }
		/*  .title div{
			  width: 6px;
			  height: 6px;
			  border: 2px solid red;
			  border-left-color: transparent;
			  border-bottom-color: transparent;
			  transform:rotate(45deg);
			  margin-top: 5px;
		  } */
		  .pic{
			  background:#f2f2f2 url(images/activity_pic.jpg)no-repeat;
			  padding-top: 120px;
			  
		  }
		  .pic a{
			  display: block;
			  font-size: 12px;
			  line-height: 34px;
			  text-align: center;
		  }
		  .new ul{
			  padding-top: 10px;
		  }
		  .new ul li{}
		  .new ul li a{
			  font-size: 12px;
			  line-height: 26px;
		  }
		 .news :nth-child(2) .pic{
			background: #f2f2f2 url(images/news_pic.jpg)no-repeat;
		  }
		 .news :nth-child(3) .pic{
		  	background:#f2f2f2  url(images/community_pic.jpg)no-repeat;
		  }
		footer{
			background-color: #333333;
			padding-top: 51px;
			color:#b1aea9;
		}
		.jianjie{
			height: 226px;	
			position: relative;
		}
		.jianjie .fl{
			width: 164px;
		}
		.jianjie .fl h4{
			font-size: 11px;
		}
		.jianjie .fl p{
			font-size: 11px;
			line-height: 19px;
		}
		.jianjie .v{
			
			position: relative;
			
		}
		.jianjie .bdr{
			width: 137px;
			border: 1px solid #453e45;
		}
		.jianjie .v h4 {
			padding-left: 30px;
		}
		.jianjie .v h4::before {
			content: "";
			font-size: 12px;
			height: 15px;
			width: 15px;
			background: url(images/icon.png)no-repeat 0 -293px ;
			position: absolute;
			top: 1.5px;left: 8px;
			}
			.jianjie .v h4::after{
				content: "";
				width: 15px;
				height: 15px;
				background: url(images/icon.png) no-repeat -28px -293px;
				position: absolute;
				top: 1.5px;
				left: 118px;
			}
		.jianjie .v a{
			font-size: 12px;
			line-height: 26px; 
			text-decoration: none;
			padding-left: 30px;	
				color:#b1aea9;
		}
		.jianjie .v>ul {
			padding-top: 12px;
			position: relative;
		}
		.jianjie .v>ul :nth-child(1) ::before{
			content: "";
			width: 9px;
			height: 16px;
			background: url(images/icon.png) no-repeat -5px -320px;
			position: absolute;
			top: 18px;left:12px;
			
		}
		.jianjie .v >ul :nth-child(1) :hover::before { 
		 	content: "";
		 	width: 9px;
		 	height: 16px;	
		 	background: url(images/icon.png) no-repeat -30px -320px;
		 	position: absolute;
		 	top: 18px;left:12px;
		 }
    .jianjie .v>ul :nth-child(2) ::before{
    	content: "";
    	width: 16px;
    	height: 12px;
    	background: url(images/icon.png) no-repeat -2px -347px;
    	position: absolute;
    	top: 45px;left:9px;
    	
    }
    .jianjie .v >ul :nth-child(2) :hover::before { 
     	content: "";
     	width: 16px;
     	height: 12px;	
     	background: url(images/icon.png) no-repeat -27px -347px;
     	position: absolute;
     	top: 45px;left:9px;
     }
	 .jianjie .v>ul :nth-child(3) ::before{
	 	content: "";
	 	width: 16px;
	 	height: 13px;
	 	background: url(images/icon.png) no-repeat -2px -373px;
	 	position: absolute;
	 	top: 71px;left:9px;
	 }
	 .jianjie .v >ul :nth-child(3) :hover::before { 
	  	content: "";
	  	width: 16px;
	  	height: 13px;	
	  	background: url(images/icon.png) no-repeat -27px -373px;
	  	position: absolute;
	  	top: 71px;left:9px;
	  }
	  .jianjie .v>ul :nth-child(4) ::before{
	  	content: "";
	  	width: 20px;
	  	height: 16px;
	  	background: url(images/icon.png) no-repeat 0px -397px;
	  	position: absolute;
	  	top: 95px;left:7px;
	  	
	  }
	  .jianjie .v >ul :nth-child(4) :hover::before { 
	   	content: "";
	   	width: 20px;
	   	height: 16px;	
	   	background: url(images/icon.png) no-repeat -25px -397px;
	   	position: absolute;
	   	top: 95px;left:7px;
	   }
	   .jianjie .v>ul :nth-child(5) ::before{
	   	content: "";
	   	width: 17px;
	   	height: 18px;
	   	background: url(images/icon.png) no-repeat -1px -422px;
	   	position: absolute;
	   	top: 120px;left:8px;
	   	
	   }
	   .jianjie .v >ul :nth-child(5) :hover::before { 
	    	content: "";
	    	width: 17px;
	    	height: 18px;	
	    	background: url(images/icon.png) no-repeat -26px -422px;
	    	position: absolute;
	    	top: 120px;left:8px;
	    }
		.jianjie .v>ul :nth-child(6) ::before{
			content: "";
			width: 20px;
			height: 16px;
			background: url(images/icon.png) no-repeat -1px -449px;
			position: absolute;
			top: 147px;left:7px;
			
		}
		.jianjie .v >ul :nth-child(6) :hover::before { 
		 	content: "";
		 	width: 20px;
		 	height: 16px;	
		 	background: url(images/icon.png) no-repeat -26px -449px;
		 	position: absolute;
		 	top: 147px;left:7px;
		 }
		 .mid{
			  font-size: 12px;
			position: relative;
			
		 }
		 .mid1{
			 height: 37px;		 
			 border-top:1px dotted #595959 ;
			 border-bottom:1px dotted #595959 ;			 
		 }
		 .mid1::before{
			 content: "";
			 width: 16px;
			 height: 16px;
			 background: url(images/icon.png)no-repeat  -100px  -280px;
			 position: absolute;
			 top: 12px;
			 left: 964px;
		 }
		 .mid1 .fl{
		     display: block;/* margin不只有横向 */
			text-decoration: none;
            margin: 12px 0 10px 0; 
			border-right: 1px solid #546658;
			text-align: center;
		 }
		 .mid1  a{	
			color:#b1aea9;
			 font-size: 12px;
             line-height:0px;
			padding:0 8px;
		 }
		 .mid2{
			 height: 37px;
			 border-bottom:1px dotted #595959 ;	
			 
		 }
		 .mid2::before{
			 content: "";
			 width: 16px;
			 height: 16px;
			 background: url(images/icon.png)no-repeat  -100px  -280px;
			 position: absolute;
			 top: 50px;
			 left: 964px;
		 }
		 .mid2 >ul .fl{
			 display: block;/* margin不只有横向 */
			 text-decoration: none;
			 margin: 12px 0 10px 0;
			 border-right: 1px solid #546658;
			 text-align: center;
		 }

		 .mid2 h4{
			 display: block;/* margin不只有横向 */
			 text-decoration: none;
			 margin: 12px 0 10px 0;
			 color: #595e64;
			
		 }
		 .mid2  a{
		 			color:#b1aea9;
		 			font-size: 12px;
		 			 line-height:0px;
		 			padding:0 8px;
		 }
		 .late{
			 height: 117px;
			 background: url(images/logo_company.png) no-repeat  0 30px,
			             url(images/qa_wen.png)no-repeat 630px 26px,
						 url(images/gs.png)no-repeat 684px 27px,
						 url(images/knet_cn.png)no-repeat 736px 27px,
						 url(images/anva.png)no-repeat 851px 26px;	 
		 }
		 .late .commpany{
			 padding-left: 132px;
			 padding-top: 24px;
			 font-size: 11px;
			 /* color: #545750; */
			 line-height: 18px;position: relative;
		 }
		</style>
	</head> 
	<body>
		<!-- 语义化标签 -->
	<header class="clearfix">
		 <div class="w">
			 <div class="logo  fl"><img src="images/uclogo.png" alt=""></div>
			 <ul class="navigation fr  clearfix">
			 <li class="fl current"><a href="">首页</a></li>
			 <li class="fl">
				 <a href="">下载</a>
				 <ul class="subnav">
					 <li><a href="">手机UC</a></li>
					 <li><a href="">电脑浏览器</a></li>
					 <li><a href="">TV浏览器</a></li>
				 </ul>
				 </li>
			 <li class="fl"><a href="">公司</a></li>
			 <li class="fl"><a href="">合作</a></li>
			 <li class="fl"><a href="">社区</a></li>
			 <li class="fl"><a href="">帮助</a></li>	 
			 </ul> 
		 </div>
	</header>
	<div class="main">
		<div class="banner"></div>
		<div class="icons">
			<div class="w clearfix">
				<div class="icon fl"><a href="">Android版下载</a></div>
				<div class="icon fl"><a href="">iPhone版下载</a></div>
				<div class="icon fl"><a href="">电脑版下载</a></div>
				<div class="icon fl"><a href="">Pad版下载</a></div>
				<div class="icon fl"><a href="">TV版下载</a></div>
				<div class="icon fl"><a href="">WP版下载</a></div>
				<div class="twocode">手机扫一扫下载</div>
			</div>
		</div>
		<div class="news clearfix w">
		<div class="new fl ">
			<div class="title clearfix">
				<h4 class="fl">活动专区</h4>
				<a href="" class="fr">更多</a>
				
			</div>
			<div class="pic"><a href="">上uc.cn，下载抢100M流量礼包</a></div>
			<ul>
				<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
				<li><a href="">第二季环保袋活动开放申请啦</a></li>
				<li><a href="">最壕UC微信号，天天送大奖</a></li>
				<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
				<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
			</ul>
		</div>
		<div class="new fl  ">
			<div class="title clearfix">
				<h4 class="fl">新闻动态</h4>
				<a href="" class="fr">更多</a>
				
			</div>
			<div class="pic"><a href="">不断寻找合伙人</a></div>
			<ul>
				<li><a href="">神马搜索与《梦想星搭档》展开娱乐内</a></li>
				<li><a href="">UC九游11月报告：《乱斗西游》成MOBA手</a></li>
				<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
				<li><a href="">UC浏览器新版造就极致视频体验</a></li>
				<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
			</ul>
		</div>
		<div class="new fl  ">
			<div class="title clearfix">
				<h4 class="fl">社区热帖</h4>
				<a href="" class="fr">更多</a>
				
			</div>
			<div class="pic"><a href="">UC浏览器抢票帮正式发布！团结一切力量</a></div>
			<ul>
				<li><a href=""> UC浏览器Android版10.0皮肤制作教程</a></li>
				<li><a href=""> 年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
				<li><a href=""> UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
				<li><a href=""> UC姐神秘面容首次曝光，多图胆小慎入</a></li>
				<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
			</ul>
		</div>
	</div>
	</div>
<footer class="clearfix">
		<div class="jianjie clearfix w">
			<div class="fl">
				<h4>UC浏览器</h4>
				<p>产品动态</p>
				<p>功能介绍</p>
				<p>安卓浏览器</p>
				<p>iPhone浏览器</p>
				<p>电脑浏览器</p>
				<p>WP浏览器</p>
				<p>iPad浏览器</p>
				<p>aPad浏览器</p>
				<p>TV浏览器</p>
				<p>塞班浏览器</p>
			</div>
			<div class="fl">
				<h4>公司</h4>
				<p>公司首页</p>
				<p>公司概况</p>
				<p>公司动态</p>
				<p>管理团队</p>
				<p>企业文化</p>
				<p>粉丝专区</p>
				<p>荣誉之旅</p>
				<p>联系我们</p>
				<p>投资者</p>
				<p>UC闪屏</p>
			</div>
			<div class="fl">
				<h4>其它产品</h4>
				<p>UC九游</p>
				<p>PP助手</p>
				<p>神马搜索</p>
				<p> UC云</p>
				<p>U点充值</p>
				<p>用户中心</p>
				<p>体验中心</p>
				<p>帮助中心</p>
				<p>意见反馈</p>		
			</div>	
			<div class="fl">
				<h4>开放合作</h4>
				<p> 游戏开放平台</p>
				<p> 运营商合作</p>
				<p> 终端厂商合作</p>
				<p> 互联网合作</p>
				<p> 开发者中心</p>
				<p> 战略投资</p>
			</div>
			<div class="fl">
				<h4>招聘</h4>
				<p> 社会招聘</p>
				<p> 人才推荐</p>
				<p> 校园招聘</p>
				<p> 实习生招聘</p>
				<p> 内部推荐</p>
				<p> 走进UC</p>
			</div>
			<div class="fl v">
				<div class="bdr">
				<h4>中文版</h4>
				</div>
			<ul>
				<li><a href="">手机站</a></li>
				<li><a href="">Pad站</a></li>
				<li><a href="">TV站</a></li>
				<li><a href="">UC浏览器微博</a></li>
				<li><a href="">UC浏览器贴吧</a></li>
				<li><a href="">UC浏览器微信</a></li>
			</ul>
			</div>		
			</div>
	  <div class="mid w">
		  <div class="mid1 ">
			  <ul>
				  <li class="fl"><a href="">阿里巴巴集团</a></li>
				  <li class="fl"><a href="">淘宝网</a></li>
				  <li class="fl"><a href="">天猫</a></li>
				  <li class="fl"><a href="">聚划算</a></li>
				  <li class="fl"><a href="">全球速卖通</a></li>
				  <li class="fl"><a href="">阿里巴巴国际交易市场</a></li>
				  <li class="fl"><a href="">1688</a></li>
				  <li class="fl"><a href="">阿里妈妈</a></li>
				  <li class="fl"><a href="">阿里旅行·去啊</a></li>
				  <li class="fl"><a href="">阿里云计算</a></li>
				  <li class="fl"><a href="">YunOS</a></li>
				  <li class="fl"><a href="">阿里通信</a></li>
				  <li class="fl"><a href="">万网</a></li>
				  <li class="fl"><a href="">高德</a></li>
			  </ul>
		  </div>
		  <div class="mid2">
			  <h4 class="fl">友情链接: </h4>
			  <ul>
				  <li class="fl"><a href="">手机游戏</a></li>
				  <li class="fl"><a href="">网易科技</a></li>
				  <li class="fl"><a href="">dospy智能手机网</a></li>
				  <li class="fl"><a href="">历趣手机软件</a></li>
				  <li class="fl"><a href="">威锋网</a></li>
				  <li class="fl"><a href="">小说全搜</a></li>
				  <li class="fl"><a href="">IT之家</a></li>
				  <li class="fl"><a href="">前瞻网</a></li>
				  <li class="fl"><a href="">手机软件下载</a></li>
				  <li class="fl"><a href="">pc6下载</a></li>
				  <li class="fl"><a href="">KK语音</a></li>
				  <li class="fl"><a href="">安卓市场</a></li>
				  <li class="fl"><a href="">机锋网</a></li>
				
			  </ul>
		  </div>
	  </div>
	<div class="late w ">
		<div class="commpany">
	   <p>&#169;2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号</p>
	   <p>中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120</p>
	   <p>增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</p>
	</div>
	</div>
	</footer>
	</body>
</html>
